<template>
    <div class="home">
        <!-- 1-->
        <div>
            <div class="header">
                <jinrongfuwupingtai></jinrongfuwupingtai>
            </div>
            <div class="bottom">
                <div>
                    <daikuanshujuhuizong></daikuanshujuhuizong>
                </div>
                <div>
                    <huanbizengzhang></huanbizengzhang>
                </div>
            </div>
        </div>
        <!--2-->
        <div>
            <zhengxin></zhengxin>
        </div>

        <div>
            <yiliao></yiliao>
        </div>

        <div>
            <shuidian></shuidian>
        </div>
        <div>
            <yanglao></yanglao>
        </div>
        <div>
            <tongxun></tongxun>
        </div>
        <div>
            <shebao></shebao>
        </div>
    </div>
</template>

<script>

    import jinrongfuwupingtai from "./jinrongfuwupingtai"
    import daikuanshujuhuizong from "./daikuanshujuhuizong"
    import huanbizengzhang from "./huanbizengzhang"
    import zhengxin from "./zhengxin"
    import yiliao from "./yiliao"
    import shuidian from "./shuidian"
    import tongxun from "./tongxun"
    import yanglao from "./yanglao"
    import shebao from "./shebao"

    export default {
        name: "Home",
        components: {
            jinrongfuwupingtai,
            daikuanshujuhuizong,
            huanbizengzhang,
            zhengxin,
            yiliao,
            shuidian,
            tongxun,
            yanglao,
            shebao
        },
        data() {
            return {}
        }
    };
</script>
<style lang="scss" scoped>
    .home {
        height: 100%;
        width: 100%;
        padding: 40px;
        display: flex;

        > div {
            /*flex:1;*/
            /*background: red;*/
            margin: 0 20px;

            &:nth-of-type(1) {
                width: 22%;
                display: flex;
                flex-direction: column;
                > div {
                    &:first-child {
                        height: 33%;
                    }
                    &:last-child {
                        margin-top: 40px;
                        height: 67%;

                        display: flex;
                        > div {
                            width: 49%;
                            flex: 1;
                        }
                    }
                }
            }
            &:nth-of-type(2) {
                width: 12%;

            }
            &:nth-of-type(3) {
                width: 14%;
            }
            &:nth-of-type(4) {
                width: 14%;
            }
            &:nth-of-type(5) {
                width: 10%;
            }
            &:nth-of-type(6) {
                width: 10%;
            }
            &:nth-of-type(7) {
                flex:1;
            }

        }
    }
</style>
